import { Button } from '@/components/ui/button';
import { Eye, FileText } from 'lucide-react';
import React from 'react';
import VersionControl from './VersionControl';

type PanelState = "open" | "closed";

interface TopFunctionBarProps {
  currentVersion: string
  versions: string[]
  onVersionChange: (version: string) => void
  onPreviewToggle: () => void
  isPreviewMode: boolean
  openLibraryPanel: (panelState: PanelState, setPanelState: React.Dispatch<React.SetStateAction<PanelState>>) => void
  enterpriseLibraryPanelState: PanelState
  materialLibraryPanelState: PanelState
  standardLibraryPanelState: PanelState
  setEnterpriseLibraryPanelState: React.Dispatch<React.SetStateAction<PanelState>>
  setMaterialLibraryPanelState: React.Dispatch<React.SetStateAction<PanelState>>
  setStandardLibraryPanelState: React.Dispatch<React.SetStateAction<PanelState>>
  onAddChapter?: (panelState: "open" | "closed", setPanelState: (state: "open" | "closed") => void) => void
}

const TopFunctionBar: React.FC<TopFunctionBarProps> = ({
  currentVersion,
  versions,
  onVersionChange,
  onPreviewToggle,
  isPreviewMode,
  openLibraryPanel,
  enterpriseLibraryPanelState,
  materialLibraryPanelState,
  standardLibraryPanelState,
  setEnterpriseLibraryPanelState,
  setMaterialLibraryPanelState,
  setStandardLibraryPanelState,
}) => {
  return (
    <header className="flex h-16 shrink-0 items-center justify-between border-b px-4 bg-background">
      <div className="flex items-center gap-2">
        <h1 className="text-xl font-semibold">国新ESG报告 2024年度</h1>
      </div>
      <div className="flex items-center gap-4">
        <div className="flex items-center gap-2">
          <Button 
            variant="outline" 
            size="icon"
            onClick={() => openLibraryPanel(enterpriseLibraryPanelState, setEnterpriseLibraryPanelState)}
          >
            <FileText className="h-4 w-4" />
          </Button>
          <Button 
            variant="outline" 
            size="icon"
            onClick={() => openLibraryPanel(materialLibraryPanelState, setMaterialLibraryPanelState)}
          >
            <FileText className="h-4 w-4" />
          </Button>
          <Button 
            variant="outline" 
            size="icon"
            onClick={() => openLibraryPanel(standardLibraryPanelState, setStandardLibraryPanelState)}
          >
            <FileText className="h-4 w-4" />
          </Button>
        </div>
      </div>
      <div className="flex items-center gap-2">
        <VersionControl
          currentVersion={currentVersion}
          versions={versions}
          onVersionChange={onVersionChange}
        />
        <Button variant="default" onClick={onPreviewToggle}>
          <Eye className="mr-2 h-4 w-4" />
          {isPreviewMode ? "退出" : "渲染"}
        </Button>
        <Button variant="outline" onClick={() => console.log('Export functionality to be implemented')}>
          <FileText className="mr-2 h-4 w-4" />
          导出
        </Button>
      </div>
    </header>
  )
}

export default TopFunctionBar